<template>
  <div class="register">
      <div class="title">登录页</div>
      <div class="block">
          <input type="text" placeholder="输入手机号" v-model="formData.phone">
      </div>
        <div class="block">
          <input type="password" placeholder="输入密码" v-model="formData.pass">
      </div>
        <div class="block">
          <input type="button" value="登录" @click="login">
      </div>
  </div>
</template>

<script>
import {user_login}from '../utils/api'
export default {
  data(){
    return{
        formData:{
        phone:'',
        pass:''
      }
    }
  },
  methods:{
    login(){
      if( /^1[3-9]\d{9}$/.test( this.formData.phone ) == false ){
        alert('请输入合法的手机号');
      }else if( !this.formData.pass ){
        alert('请输入密码')
      }else{ //验证通过 
        //发起登陆请求
        user_login( this.formData ).then((res)=>{
          if( res.data.code == 200 ){
            //保存用户信息,token
            localStorage.setItem('token',res.data.token);
            localStorage.setItem('userinfo', JSON.stringify( res.data.userinfo ) );
            //自动跳转到首页
            this.$router.push('/');
          }else{
            alert('登陆失败!');
          }
        })
      }
    }
  }

}
</script>

<style lang="scss" scoped>
.register{
  margin: 50px 20px;
}
.register .title{
  font-weight: bold;
  text-align: center;
  line-height: 40px;
}
.register .block{
  margin: 20px 0;
}
.register .block input{
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding-left: 20px;
  box-sizing: border-box;
  outline: none;
  width: 100%;
}
</style>